<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <link rel="stylesheet" href="/study/style/style.css">
<script>
    var NlviConfig = {
        title: "子鱼非鱼",
        author: "张春园",
        theme: "banderole",
        lightbox: true,
        animate: true,
        baseUrl: "/study/",
        search: false
    }
</script>



    <link rel="stylesheet" href="/study/script/lib/lightbox/css/lightbox.min.css">




    <link rel="stylesheet" href="/study/syuanpi/syuanpi.min.css">




    <link rel="icon" href="http://img.blog.csdn.net/20180117154531985?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvYmFpZHVfMzMyOTc3MjA=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast">







<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<meta name="browsermode" content="application">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-title" content="子鱼非鱼">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<meta name="msapplication-navbutton-color" content="#666666">
<meta name= "format-detection" content="telephone=no" />
<meta name="keywords" content="nlvi, Nlvi" />

  <link rel="apple-touch-icon"  sizes="72x72"  href="http://img.blog.csdn.net/20180117154531985?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvYmFpZHVfMzMyOTc3MjA=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast">
  <link rel="apple-touch-icon-precomposed"  sizes="72x72"  href="http://img.blog.csdn.net/20180117154531985?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvYmFpZHVfMzMyOTc3MjA=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast">


  <meta name="subtitle" content="每一次抬脚，每一次落步，它代表一种进步，时间最无情，我们需要让每一步都跟得上时间的节奏！">


  <meta name="description" content="子鱼非鱼">



  <meta name="keywords" content="HelloWorld, Nlvi" />

  <title> CSDN markdown编辑器写博客 · 子鱼非鱼 </title>
</head>
<body>
  <div class="progress">
  <div class="progress-inner"></div>
</div>
  
  
    <div class="tagcloud-mask"></div>  
<div class="tagcloud" id="tagcloud">
  <div class="tagcloud-inner">
    <a href="/study/tags/Annotation/" style="font-size: 14px;">Annotation</a> <a href="/study/tags/HelloWorld/" style="font-size: 14px;">HelloWorld</a> <a href="/study/tags/Maven/" style="font-size: 14px;">Maven</a>
  </div>
</div>  
  

  <div class="container">

    <header class="header" id="header">
  <div class="header-wrapper">
    <div class="logo">
  <div class="logo-inner syuanpi tvIn">
    <span><a href="/study/">子鱼非鱼</a></span>
    
      <span id="subtitle">每一次抬脚，每一次落步，它代表一种进步，时间最无情，我们需要让每一步都跟得上时间的节奏！</span>
    
  </div>
</div>
    <nav class="main-nav">
        
  <ul class="main-nav-list syuanpi tvIn">
  
  
    
      
    
    <li class="menu-item">
      <a href="/study/" id="article">
        <span class="base-name">文章</span>
        
          <span class="menu-item-label">article</span>
        
      </a>
    </li>  
  
    
      
    
    <li class="menu-item">
      <a href="/study/archives" id="archives">
        <span class="base-name">归档</span>
        
          <span class="menu-item-label">archives</span>
        
      </a>
    </li>  
  
    
      
    
    <li class="menu-item">
      <a href="javascript:;" id="tags">
        <span class="base-name">标签</span>
        
          <span class="menu-item-label">tags</span>
        
      </a>
    </li>  
  
    
      
    
    <li class="menu-item">
      <a href="/study/about" id="about">
        <span class="base-name">关于</span>
        
          <span class="menu-item-label">about</span>
        
      </a>
    </li>  
  
  </ul>
  
</nav>
    
    
  </div>
</header>
<div class="mobile-header">
  <div class="mobile-header-body">
    <div class="mobile-header-list">
      
        
            <div class="mobile-nav-item">
                <a href="/study/">
                    <span>文章</span>
                    
                        <span class="menu-item-label">article</span>
                    
                </a>
            </div>
        
      
        
            <div class="mobile-nav-item">
                <a href="/study/archives">
                    <span>归档</span>
                    
                        <span class="menu-item-label">archives</span>
                    
                </a>
            </div>
        
      
        
          <div class="mobile-nav-item inner-cloud">
            <div class="mobile-nav-tag">
              <a href="javascript:;" id="mobile-tags">
                <span>标签</span>
                
                    <span class="menu-item-label">tags</span>
                
              </a>
            </div>
            <div class="mobile-nav-tagcloud">
              <div class="mobile-tagcloud-inner">
                <a href="/study/tags/Annotation/" style="font-size: 14px;">Annotation</a> <a href="/study/tags/HelloWorld/" style="font-size: 14px;">HelloWorld</a> <a href="/study/tags/Maven/" style="font-size: 14px;">Maven</a>
              </div>
            </div>
          </div>
        
      
        
            <div class="mobile-nav-item">
                <a href="/study/about">
                    <span>关于</span>
                    
                        <span class="menu-item-label">about</span>
                    
                </a>
            </div>
        
      
    </div>
  </div>
  <div class="mobile-header-nav">
    <div class="mobile-header-item" id="mobile-left">
      <div class="header-menu-item">
        <span class="header-menu-line"></span>
      </div>
    </div>
    <h1 class="mobile-header-title">
      <a href="/">子鱼非鱼</a>
    </h1>
    <div class="mobile-header-item"></div>
  </div>
</div>
    <div class="container-inner">
      <main class="main" id="main">
        <div class="main-wrapper">
          
    
  <article class="
  post
   is_post 
  ">
    <header class="post-header">
      <div class="post-time syuanpi riseIn-light back-1">
        <div class="post-time-wrapper">
          <span>2018-01-17</span>
          
          
            
              <aside class="post-tags syuanpi riseIn-light back-3">
              
                <a href="/study/tags/HelloWorld/">HelloWorld</a>
              
              </aside>
            
          
        </div>
      </div>
      <h1 class="post-title syuanpi riseIn-light back-2">
        
          CSDN markdown编辑器写博客
        
      </h1>
    </header>
    <div class="post-content syuanpi riseIn-light back-3">
      
        <p>第一次使用gitee搭建了一个小博客，看着自己一步一步搭建起来的“小房子”，心情小小的激动啊，对于MarkDown语法不太瞭的菜鸟，先试试手吧。<br><a id="more"></a></p>
<h2 id="CSDN-markdown-语法"><a href="#CSDN-markdown-语法" class="headerlink" title="CSDN  markdown 语法"></a>CSDN  markdown 语法</h2><p>没有太多的工具，只能跑到CSDN的markdown编辑器上来耍一下了。话说csdn的这个编辑器还是很不错的，写完直接导出’ .md ‘文件就好了，点个赞！</p>
<ul>
<li><strong>Markdown和扩展Markdown简洁的语法</strong></li>
<li><strong>代码块高亮</strong></li>
<li><strong>图片链接和图片上传</strong></li>
<li><strong><em>LaTex</em>数学公式</strong></li>
<li><strong>UML序列图和流程图</strong></li>
<li><strong>离线写博客</strong></li>
<li><strong>导入导出Markdown文件</strong></li>
<li><strong>丰富的快捷键</strong></li>
</ul>
<hr>
<h2 id="快捷键"><a href="#快捷键" class="headerlink" title="快捷键"></a>快捷键</h2><ul>
<li>加粗    <code>Ctrl + B</code> </li>
<li>斜体    <code>Ctrl + I</code> </li>
<li>引用    <code>Ctrl + Q</code></li>
<li>插入链接    <code>Ctrl + L</code></li>
<li>插入代码    <code>Ctrl + K</code></li>
<li>插入图片    <code>Ctrl + G</code></li>
<li>提升标题    <code>Ctrl + H</code></li>
<li>有序列表    <code>Ctrl + O</code></li>
<li>无序列表    <code>Ctrl + U</code></li>
<li>横线    <code>Ctrl + R</code></li>
<li>撤销    <code>Ctrl + Z</code></li>
<li>重做    <code>Ctrl + Y</code></li>
</ul>
<h3 id="Markdown及扩展"><a href="#Markdown及扩展" class="headerlink" title="Markdown及扩展"></a>Markdown及扩展</h3><blockquote>
<p>Markdown 是一种轻量级标记语言，它允许人们使用易读易写的纯文本格式编写文档，然后转换成格式丰富的HTML页面。    —— <a href="https://zh.wikipedia.org/wiki/Markdown" target="_blank"> [ 维基百科 ]</a></p>
</blockquote>
<p>使用简单的符号标识不同的标题，将某些文字标记为<strong>粗体</strong>或者<em>斜体</em>，创建一个<a href="http://www.csdn.net" target="_blank" rel="noopener">链接</a>等，详细语法参考帮助？。</p>
<p>本编辑器支持 <strong>Markdown Extra</strong> , 　扩展了很多好用的功能。具体请参考<a href="https://github.com/jmcmanus/pagedown-extra" title="Pagedown Extra" target="_blank" rel="noopener">Github</a>.  </p>
<h3 id="表格"><a href="#表格" class="headerlink" title="表格"></a>表格</h3><p><strong>Markdown　Extra</strong>　表格语法：</p>
<table>
<thead>
<tr>
<th>项目</th>
<th>价格</th>
</tr>
</thead>
<tbody>
<tr>
<td>Computer</td>
<td>$1600</td>
</tr>
<tr>
<td>Phone</td>
<td>$12</td>
</tr>
<tr>
<td>Pipe</td>
<td>$1</td>
</tr>
</tbody>
</table>
<p>可以使用冒号来定义对齐方式：</p>
<table>
<thead>
<tr>
<th style="text-align:left">项目</th>
<th style="text-align:right">价格</th>
<th style="text-align:center">数量</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">Computer</td>
<td style="text-align:right">1600 元</td>
<td style="text-align:center">5</td>
</tr>
<tr>
<td style="text-align:left">Phone</td>
<td style="text-align:right">12 元</td>
<td style="text-align:center">12</td>
</tr>
<tr>
<td style="text-align:left">Pipe</td>
<td style="text-align:right">1 元</td>
<td style="text-align:center">234</td>
</tr>
</tbody>
</table>
<p>###定义列表</p>
<p><strong>Markdown　Extra</strong>　定义列表语法：<br>项目１<br>项目２<br>:   定义 A<br>:   定义 B</p>
<p>项目３<br>:   定义 C</p>
<p>:   定义 D</p>
<pre><code>&gt; 定义D内容
</code></pre><h3 id="代码块"><a href="#代码块" class="headerlink" title="代码块"></a>代码块</h3><p>代码块语法遵循标准markdown代码，例如：<br><figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">public</span> <span class="keyword">static</span> <span class="keyword">void</span> <span class="title">show</span><span class="params">()</span></span>&#123;</span><br><span class="line"></span><br><span class="line">Integer num1 = <span class="number">22</span>;</span><br><span class="line">Integer num2 = <span class="number">33</span>;</span><br><span class="line">System.out.printlf(<span class="string">"变量未使用！"</span>);	</span><br><span class="line"></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></p>
<p>###脚注<br>生成一个脚注[^footnote].<br>  [^footnote]: 这里是 <strong>脚注</strong> 的 <em>内容</em>.</p>
<h3 id="目录"><a href="#目录" class="headerlink" title="目录"></a>目录</h3><p>用 <code>[TOC]</code>来生成目录：</p>
<p>[TOC]</p>
<h3 id="数学公式"><a href="#数学公式" class="headerlink" title="数学公式"></a>数学公式</h3><p>使用MathJax渲染<em>LaTex</em> 数学公式，详见<a href="http://math.stackexchange.com/" target="_blank" rel="noopener">math.stackexchange.com</a>.</p>
<ul>
<li>行内公式，数学公式为：$\Gamma(n) = (n-1)!\quad\forall n\in\mathbb N$。</li>
<li>块级公式：</li>
</ul>
<p>$$    x = \dfrac{-b \pm \sqrt{b^2 - 4ac}}{2a} $$</p>
<p>更多LaTex语法请参考 <a href="http://meta.math.stackexchange.com/questions/5020/mathjax-basic-tutorial-and-quick-reference" target="_blank" rel="noopener">这儿</a>.</p>
<h3 id="UML-图"><a href="#UML-图" class="headerlink" title="UML 图:"></a>UML 图:</h3><p>可以渲染序列图：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">张三-&gt;李四: 嘿，小四儿, 写博客了没?</span><br><span class="line">Note right of 李四: 李四愣了一下，说：</span><br><span class="line">李四--&gt;张三: 忙得吐血，哪有时间写。</span><br></pre></td></tr></table></figure>
<p>或者流程图：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">st=&gt;start: 开始</span><br><span class="line">e=&gt;end: 结束</span><br><span class="line">op=&gt;operation: 我的操作</span><br><span class="line">cond=&gt;condition: 确认？</span><br><span class="line"></span><br><span class="line">st-&gt;op-&gt;cond</span><br><span class="line">cond(yes)-&gt;e</span><br><span class="line">cond(no)-&gt;op</span><br></pre></td></tr></table></figure>
<ul>
<li>关于 <strong>序列图</strong> 语法，参考 <a href="http://bramp.github.io/js-sequence-diagrams/" target="_blank" rel="noopener">这儿</a>,</li>
<li>关于 <strong>流程图</strong> 语法，参考 <a href="http://adrai.github.io/flowchart.js/" target="_blank" rel="noopener">这儿</a>.</li>
</ul>
<h2 id="离线写博客"><a href="#离线写博客" class="headerlink" title="离线写博客"></a>离线写博客</h2><p>即使用户在没有网络的情况下，也可以通过本编辑器离线写博客（直接在曾经使用过的浏览器中输入<a href="http://write.blog.csdn.net/mdeditor" target="_blank" rel="noopener">write.blog.csdn.net/mdeditor</a>即可。<strong>Markdown编辑器</strong>使用浏览器离线存储将内容保存在本地。</p>
<p>用户写博客的过程中，内容实时保存在浏览器缓存中，在用户关闭浏览器或者其它异常情况下，内容不会丢失。用户再次打开浏览器时，会显示上次用户正在编辑的没有发表的内容。</p>
<p>博客发表后，本地缓存将被删除。　</p>
<p>用户可以选择 <i class="icon-disk"></i> 把正在写的博客保存到服务器草稿箱，即使换浏览器或者清除缓存，内容也不会丢失。</p>
<blockquote>
<p><strong>注意：</strong>虽然浏览器存储大部分时候都比较可靠，但为了您的数据安全，在联网后，<strong>请务必及时发表或者保存到服务器草稿箱</strong>。</p>
</blockquote>
<p>##浏览器兼容</p>
<ol>
<li>目前，本编辑器对Chrome浏览器支持最为完整。建议大家使用较新版本的Chrome。</li>
<li>IE９以下不支持</li>
<li>IE９，１０，１１存在以下问题<ol>
<li>不支持离线功能</li>
<li>IE9不支持文件导入导出</li>
<li>IE10不支持拖拽文件导入</li>
</ol>
</li>
</ol>
<hr>

      
    
    </div>
    
      
      
  <hr class="copy-line">
  <div class="post-copyright">
    <div class="copy-author">
      <span>作者 :</span>
      <span>张春园</span>
    </div>
    <div class="copy-url">
      <span>地址 :</span>
      <a href="http://wjzcy_hfh.gitee.io/study/2018/01/17/csdn-markdown/">http://wjzcy_hfh.gitee.io/study/2018/01/17/csdn-markdown/</a>
    </div>
    <div class="copy-origin">
      <span>来源 :</span>
      <a href="http://wjzcy_hfh.gitee.io/study">http://wjzcy_hfh.gitee.io/study</a>
    </div>
    <div class="copy-license">
      
      著作权归作者所有，转载请联系作者获得授权。
    </div>
  </div>

    
  </article>
  
    
  <nav class="article-page">
    
      <a href="/study/2018/01/22/mavenincludelocal/" id="art-left" class="art-left">
        <span class="next-title">
          <i class="iconfont icon-left"></i>使用Maven放入本地Jar包，并打进war包
        </span>
      </a>
    
    
      <a href="/study/2018/01/17/hello-world/" id="art-right" class="art-right">
        <span class="prev-title"> 
          Hello World<i class="iconfont icon-right"></i>  
        </span>
      </a>
    
  </nav>

    
  <i id="com-switch" class="iconfont icon-more jumping-in long infinite" style="font-size:24px;display:block;text-align:center;transform:rotate(180deg);"></i>
  <div class="post-comments" id="post-comments" style="display: block;margin: auto 16px;">
    
    
    

  </div>


  
   
    
  
  <aside class="post-toc">
    <span class="title" id="toc-switch"><span>文章导航</span></span>
    <div class="toc-inner syuanpi back-1 fallIn-light">
      <li class="title-link"><a href="javascript:;" class="toTop">CSDN markdown编辑器写博客</a></li>
      <ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#CSDN-markdown-语法"><span class="toc-text">CSDN  markdown 语法</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#快捷键"><span class="toc-text">快捷键</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#Markdown及扩展"><span class="toc-text">Markdown及扩展</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#表格"><span class="toc-text">表格</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#代码块"><span class="toc-text">代码块</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#目录"><span class="toc-text">目录</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#数学公式"><span class="toc-text">数学公式</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#UML-图"><span class="toc-text">UML 图:</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#离线写博客"><span class="toc-text">离线写博客</span></a></li></ol>
    </div>
  </aside>


  


        </div>
      </main>

      <footer class="footer syuanpi fadeIn" id="footer">
  <hr>
  <div class="footer-wrapper">
    <div class="left">
      <div class="contact-icon">
    
    
    
    
    
    
    
    
        
        
        
        
        
            <a href="https://www.facebook.com/" class="iconfont icon-facebook" title="facebook"></a>
        
        
        
    
        
        
        
            <a href="https://twitter.com/" class="iconfont icon-twitter" title="twitter"></a>
        
        
        
        
        
    
        
        
        
        
        
        
        
            <a href="https://www.instagram.com/" class="iconfont icon-ins" title="instagram"></a>
        
    
        
        
            <a href="https://weibo.com/3784582021" class="iconfont icon-weibo" title="weibo"></a>
        
        
        
        
        
        
    
        
        
        
        
            <a href="https://www.zhihu.com/people/zhang-chun-yuan-47-16" class="iconfont icon-zhihu" title="zhihu"></a>
        
        
        
        
    
        
            <a href="https://github.com/snow-ydss" class="iconfont icon-github" title="github"></a>
        
        
        
        
        
        
        
    
        
        
        
        
        
        
            <a href="https://www.linkedin.com/in/" class="iconfont icon-linkedin" title="linkedin"></a>
        
        
    
</div>
    </div>
    <div class="right">
      <div class="copyright">
    <div class="info">
        <span>&copy;</span>
        <span>2018 ~ 2018</span>
        <span>❤</span>
        <span>张春园</span>
    </div>
    <div class="theme">
        <span>
            动力来源于
            <a href="http://hexo.io/" target="_blank">Hexo </a>
        </span>
        <span>
            主题
            <a href="https://github.com/ColMugX/hexo-theme-Nlvi"> Nlvi </a>
        </span>
    </div>
    
</div>
    </div>
  </div>
</footer>
    </div>
  </div>
  <script src="/study/script/lib/jquery/jquery-3.2.1.min.js"></script>


    <script src="/study/script/lib/lightbox/js/lightbox.min.js"></script>






<script src="/study/script/src/nlvi.js"></script>
<script src="/study/script/src/utils.js"></script>
<script src="/study/script/scheme/balance.js"></script>
<script src="/study/script/src/plugins.js"></script>
<script src="/study/script/bootstarp.js"></script>


<div class="backtop syuanpi dead toTop" id="backtop">
    <i class="iconfont icon-up"></i>
    <span style="text-align:center;font-family:Georgia;"><span style="font-family:Georgia;" id="scrollpercent">1</span>%</span>
</div>


  

</body>
</html>
